<template>
  <div class="extract">
    <div class="header">
      <p class="tip">提现金额<span
        class="sp">（最低{{form.min_money}}元,单笔限额{{form.max_money}}元,单日限额{{form.today_money}}元）</span></p>
      <div class="money">¥
        <van-field v-model="amount" type="number" @input="amountInput($event)" placeholder="请输入提现金额"/>
      </div>
      <div class="line"></div>
      <div class="mian">
        <span>余额：{{form.account_balance|toFixed}}</span>
        <span @click="setAllMoney">全部提现</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="top">
      <span>提现至</span>
    </div>
    <div class="main">
      <van-radio-group v-model="radio">
        <div class="li" @click="radio = item.name" v-for="(item,index) in form.draw_way" :key="index">
          <div class="left">
            <img src="@/assets/images/wechat.png" alt="" v-show="item.name === '微信'">
            <img src="@/assets/images/bank_card.png" alt="" v-show="item.name === '银行卡'">
            <span>{{item.name}}</span>
          </div>
          <div class="right">
            <van-radio :name="item.name" checked-color="#FDBD33"></van-radio>
          </div>
        </div>

        <div class="li" v-show="radio === '银行卡'">
          <div class="left">
            <span>{{form.accountname}}（{{form.cardnumber|bankNo}}）</span>
          </div>
          <div class="right" @click="goBankCard">
            <span>选择银行卡</span>
            <img src="@/assets/images/ic_right.png" alt="">
          </div>
        </div>
      </van-radio-group>
    </div>
    <div class="btn">
      <input type="button" value="确认提现" @click="withdrawDeposit">
    </div>
  </div>
</template>

<script>
  /**
   *  提现
   * @Author zzl
   * @Date 2019/6/4 15:59.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        radio: '微信',
        form: {},
        amount: undefined,
      }
    },
    computed: {},
    methods: {
      //全部提现
      setAllMoney() {
        this.amount = this.form.account_balance;
      },
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId),
        };
        Indicator.open('加载中...');
        this.$axios.drawMsg(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
          this.radio = res.data.draw_way[0].name;
          if (this.$store.state.extract) {
            this.radio = res.data.draw_way[1].name;
            this.form.card_id = this.$store.state.extract.card_id;
            this.form.accountname = this.$store.state.extract.bankname;
            this.form.cardnumber = this.$store.state.extract.cardnumber;
          }
        })
      },
      //选择银行卡
      goBankCard() {
        this.$router.push({path: '/bankCard', query: {extract: true}})
      },
      //确认提现
      withdrawDeposit() {
        if (utils.isNone(this.amount)){
          this.$toast('请输入提现金额');
          return false;
        } else if (this.amount * 1 > this.form.account_balance * 1) {
          this.$toast('账户余额不足');
          return false;
        } else if (this.amount * 1 > this.form.max_money * 1) {
          this.$toast('提现金额不能大于' + this.form.max_money + '元');
          return false;
        } else if (this.amount < this.form.min_money) {
          this.$toast('提现金额不能小于' + this.form.min_money + '元');
          return false;
        }
        let params = {
          way_id: this.radio === '微信' ? 1 : 2,
          amount: this.amount,
          card_id: this.form.card_id,
          open_id: utils.getCookie('open_id_' + this.wechatId),
        };
        Indicator.open('加载中...');
        this.$axios.withdrawDeposit(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.$toast(res.errmsg);
          setTimeout(() => {
            this.$router.go(-1);
          }, 500)
        })
      },
      amountInput(e) {

        var regStrs = [
          ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0
          ['[^\\d\\.]+$', ''], //禁止录入任何非数字和点
          ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
          ['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上
        ];

        for (let i = 0; i < regStrs.length; i++) {
          var reg = new RegExp(regStrs[i][0]);
          this.amount = e.replace(reg, regStrs[i][1]);
        }
        if (e * 1 > this.form.account_balance * 1) {
          this.amount = this.amount.substring(0, e.length - 1)
        }
        if (e * 1 < 0) {
          this.amount = ''
        }
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less">
  .extract {
    width: 100%;
    height: 100%;
    background: white;
    overflow: auto;

    .header {
      width: 6.9rem;
      height: 2.54rem;
      box-shadow: 0px 0.06rem 0.2rem 0px rgba(240, 240, 240, 1);
      border-radius: 0.10rem;
      margin: 0.4rem auto 0.8rem;
      padding-left: 0.32rem;
      box-sizing: border-box;
      overflow: hidden;

      .tip {
        font-size: 0.3rem;
        color: #A6A6A6;
        margin-top: 0.18rem;

        .sp {
          font-size: 0.2rem;
        }
      }

      .money {
        height: 1rem;
        font-weight: bold;
        /*margin-top: 0.32rem;*/
        color: #333333;
        font-size: 0.36rem;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        padding-bottom: 0.16rem;

        .sp {
          font-size: 0.8rem;
          letter-spacing: 2px;
          margin-left: 0.4rem;
        }

        .van-field__control {
          font-size: 0.6rem;
          margin-left: 0.2rem;
          line-height: 1rem;
        }

        .van-field__control::placeholder {
          color: #A6A6A6;
        }

      }

      .line {
        width: 6.1rem;
        height: 1px;
        background: #A6A6A6;
        opacity: 0.1;
      }

      .mian {
        height: 0.74rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 0.44rem;
        box-sizing: border-box;

        span:first-child {
          color: #A6A6A6;
        }

        span:last-child {
          color: #FDBD33;
        }
      }
    }

    .line {
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }

    .top {
      width: 100%;
      height: 0.64rem;
      line-height: 0.64rem;
      color: #A6A6A6;
      padding-left: 0.37rem;
      box-sizing: border-box;

      span {
        display: block;
        width: 100%;
        height: 100%;
        border-bottom: 1px solid #F6F6F6;
      }
    }

    .main {
      width: 100%;
      padding-left: 0.37rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        height: 0.9rem;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          img {
            width: 0.52rem;
            height: 0.46rem;
            margin-right: 0.28rem;
            margin-left: 0.2rem;
            box-sizing: border-box;
          }

          span {
            font-size: 0.3rem;
            color: #333333;
          }
        }

        .right {
          padding-right: 0.4rem;
          box-sizing: border-box;
          color: #999999;
          font-size: 0.24rem;

          img {
            width: .1rem;
            height: 0.2rem;
            margin-left: 0.2rem;
          }
        }
      }
    }

    .btn {
      width: 6.96rem;
      height: 0.8rem;
      background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
      border-radius: 0.4rem;
      color: white;
      position: absolute;
      bottom: 1rem;
      left: calc(50% - 3.48rem);

      input {
        width: 6.96rem;
        height: 0.8rem;
        border: none;
        background: none;
        font-size: 0.3rem;
      }
    }
  }
</style>
